<template>
    <view class="message-container">
        <!-- 消息 -->
        <view class="message-item">
            <view :class="{ 'active': activeTab === 'send' }" @click="changeTab('send')">
                <image src="/static/xinxi/send1.png" mode="aspectFill"></image>
            </view>
            <text>发单消息</text>
        </view>
        <view class="message-item">
            <view :class="{ 'active': activeTab === 'receive' }" @click="changeTab('receive')">
                <image src="/static/xinxi/receive1.png" mode="aspectFill"></image>
            </view>
            <text>接单消息</text>
        </view>
        <view class="message-item">
            <view :class="{ 'active': activeTab === 'system' }" @click="changeTab('system')">
                <image src="/static/xinxi/xitong1.png" mode="aspectFill"></image>
            </view>
            <text>系统消息</text>
        </view>
        
        <view class="fangkuang"></view>
        
        <view class="content-area">
            <!-- 发单消息内容 -->
            <view v-if="activeTab === 'send'" class="message-content">
                <view v-for="(item, index) in sendMessages" :key="index" class="message-card">
                    <text class="message-title">订单ID: {{ item.id || '未知' }}</text>
                    <text class="message-text">状态: {{ item.status || '未知状态' }}</text>
                    <text class="message-time">创建时间: {{ item.created_at || '' }}</text>
                </view>
                <view v-if="sendMessages.length === 0" class="no-data">
                    <text>暂无发单消息</text>
                </view>
            </view>
            
            <!-- 接单消息内容 -->
            <view v-else-if="activeTab === 'receive'" class="message-content">
                <view v-for="(item, index) in receiveMessages" :key="index" class="message-card">
                    <text class="message-title">订单ID: {{ item.id || '未知' }}</text>
                    <text class="message-text">状态: {{ item.status || '未知状态' }}</text>
                    <text class="message-time">处理时间: {{ item.updated_at || '' }}</text>
                </view>
                <view v-if="receiveMessages.length === 0" class="no-data">
                    <text>暂无接单消息</text>
                </view>
            </view>
            
            <!-- 系统消息内容 -->
            <view v-else-if="activeTab === 'system'" class="message-content">
                <view v-for="(item, index) in systemMessages" :key="index" class="message-card">
                    <text class="message-title">{{ item.title || '无标题' }}</text>
                    <text class="message-text">{{ item.content || '无内容' }}</text>
                    <text class="message-time">{{ item.created_at || '' }}</text>
                </view>
                <view v-if="systemMessages.length === 0" class="no-data">
                    <text>暂无系统消息</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 'send', 
                sendMessages: [
                    // { content: '' }
                ],
                receiveMessages: [
                    // { content: '' },
                    // { content: '接单消息内容2' }
                ],
                systemMessages: [
                    // { content: '' }
                    // { content: '系统消息内容2' }
                ]
            };
        },
        methods: {
            changeTab(tab) {
            
                this.activeTab = tab;
            },
			
			getSendMessages(){
				this.token = uni.getStorageSync('token');
				 this.$http.get("http://8.137.61.186:8000/orders",{
					  status: 'pending',
					            
				 })
				.then((res)=>{
					console.log(res);
					const {code,msg,data} = res;
					uni.showToast({
						title:msg,
						icon:'none'
					});
					if(code == 1|| code == 200) {
						if(data&&data.length>0){
							this.sendMessages = data;
							console.log(data); 
						
						}
						return Promise.resolve(true);
					}
					return Promise.reject(false);
				})
				.catch((res)=>{
					console.log(res);
					return Promise.reject(false);
				});
			},
			
			
			getReceiveMessages(){
				this.token = uni.getStorageSync('token');
				 this.$http.get("http://8.137.61.186:8000/orders",{
					  status: 'accepted',
					   // user_id:'1',
					   // work_id:'5',
					   // title:'轮胎',
					   
				 })
				.then((res)=>{
					console.log(res);
					const {code,msg,data} = res;
					uni.showToast({
						title:msg,
						icon:'none'
					});
					if(code == 1|| code == 200) {
						if(data&&data.length>0){
							this.receiveMessages = data;
							console.log(data); 
						
						}
						return Promise.resolve(true);
					}
					return Promise.reject(false);
				})
				.catch((res)=>{
					console.log(res);
					return Promise.reject(false);
				});
				this.$http.get("http://8.137.61.186:8000/orders",{
				        status: 'completed',
				    })
				    .then((res)=>{
				        console.log(res);
				        const {code,msg,data} = res;
				        if(code == 1|| code == 200) {
				            if(data&&data.length>0){
				                this.receiveMessages = [...this.receiveMessages, ...data];
				                console.log(data); 
				            }
				        }
				    })
				    .catch((res)=>{
				        console.log(res);
				    });
				    
				    this.$http.get("http://8.137.61.186:8000/orders",{
				        status: 'canceled',
				    })
				    .then((res)=>{
				        console.log(res);
				        const {code,msg,data} = res;
				        if(code == 1|| code == 200) {
				            if(data&&data.length>0){
				                this.receiveMessages = [...this.receiveMessages, ...data];
				                console.log(data); 
				            }
				        }
				    })
				    .catch((res)=>{
				        console.log(res);
				    });
			},
			
			getSystemMessages(){
				this.token = uni.getStorageSync('token');
				 this.$http.get("http://8.137.61.186:8000/message",{})
				.then((res)=>{
					console.log(res);
					const {code,msg,data} = res;
					uni.showToast({
						title:msg,
						icon:'none'
					});
					if(code == 1|| code == 200) {
						if(data&&data.length>0){
							this.systemMessages = data;
							console.log('系统消息数据:', this.systemMessages);
						
						}
						return Promise.resolve(true);
					}
					return Promise.reject(false);
				})
				.catch((res)=>{
					console.log(res);
					return Promise.reject(false);
				});
			},
			
			
			
			
        },
		onShow() {
		    this.getSendMessages(),
			this.getReceiveMessages()
			this.getSystemMessages()
		}
		
		
		
		
    };
</script>

<style scoped>
    
    .message-container {
        display: flex;
        justify-content: space-around;
        position: relative;
        min-height: 100vh; 
        padding-bottom: 200rpx;
        margin-top: 2%;
    }

    .message-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px;
        text-align: center;
        z-index: 1;
    }

    .message-item image {
        width: 30px;
        height: 30px;
    }

    .active {
        background-color: #ffaa00;
        border-radius: 50%;
        padding: 5px; 
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    
    .fangkuang {
        background-color: #ffffff;
        width:94%;
        height: 160rpx;
        position: absolute;
        z-index: 0; 
        opacity: 1;
    }
    
    
    .content-area {
        position: absolute;
        top: 180rpx;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20rpx;
		min-height: 90vh; 
		overflow-y: auto; /* 允许滚动 */

    }
    
    .message-content {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx;
    }
	
	.message-card {
	    padding: 20rpx;
	    margin-bottom: 20rpx;
	    background: #fff;
	    border-radius: 12rpx;
	    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	}
	
	.message-title {
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #333;
	    display: block;
	    margin-bottom: 10rpx;
	}
	
	.message-text {
	    font-size: 28rpx;
	    color: #666;
	    display: block;
	    margin-bottom: 10rpx;
	    line-height: 1.6;
	}
	
	.message-time {
	    font-size: 24rpx;
	    color: #999;
	    text-align: right;
	}
	
	.no-data {
	    text-align: center;
	    padding: 40rpx;
	    color: #999;
	}
</style>